<template>
		<aside :class="{showSidebar:!collapsed}" >
        <!--导航菜单-->
        <el-menu default-active="0" router :collapse="collapsed" >
          <template v-for="(item,index) in sider" >
            <el-submenu :key=index v-if="!item.leaf" :index="index+''">
              <template slot="title"><i :class="item.iconCls" aria-hidden="true"></i><span slot="title">{{item.name}}</span></template>
              <el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" 
                :class="$route.path==term.path?'is-active':''">
                <i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else-if="item.leaf && item.children&&item.children.length" :index="item.children[0].path"
                :class="$route.path == item.children[0].path?'is-active':''">
              	<i :class="item.iconCls"></i>
				<span slot="title">{{item.children[0].name}}</span>
            </el-menu-item>
          </template>
        </el-menu>
          <SidebarFoot></SidebarFoot>
    </aside>
</template>
<script>
import SidebarFoot from './SidebarFoot.vue'
import bus from '../eventBus.js'
export default{
	name:'Sidebar',
	data(){
		return{
			collapsed:false,
		}
	},
	props: ["sider"],
	created(){
     
	},
	methods:{
      
	},
	mounted(){
		// 折叠导航栏
		var self=this;
		bus.$on("collaped",function (msg) {
			self.collapsed=msg;
		})
	},
	components: {
		SidebarFoot
	}
}
</script>


